window.addEventListener('load', function() {
    var focus = document.querySelector('.focus');
    var ol = focus.querySelector('ol');
    var ul = focus.children[0];
    //获取focus的宽度
    var w = focus.offsetWidth;
    //自动设置定时器
    var index = 0;
    var timer = setInterval(function() {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .6s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000)
        //监听用transitionend
    ul.addEventListener('transitionend', function() {
        if (index >= 3) {
            index = 0;
            // console.log(index);
            ul.style.transition = 'none';
            //利用最新的索引号*宽度，去滚动图片
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        //小圆点跟随变化
        //把ol里面li带有current的类名去掉
        ol.querySelector('.current').classList.remove('current');
        //让当前索引号加上current类名
        ol.children[index].classList.add('current');

    });


    //手指滑动轮播图

    //获取手指初始坐标
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        // 手指触摸的时候就停止定时器
        clearInterval(timer);

    });

    //获取手指移动的距离
    ul.addEventListener('touchmove', function(e) {

        //计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        // console.log(moveX);
        //移动盒子=和资源来的位置+移动的位置
        var translateX = -index * w + moveX;
        // 手指拖动的时候，不需要动画效果所以要取消过渡效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translateX + 'px)';
        flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
        e.preventDefault(); // 阻止滚动屏幕的行为

    });
    // 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
    ul.addEventListener('touchend', function(e) {
        if (flag) {

            // (1) 如果移动距离大于50像素我们就播放上一张或者下一张
            if (Math.abs(moveX) > 50) {
                // 如果是右滑就是 播放上一张 moveX 是正值
                if (moveX > 0) {
                    index--;
                } else {
                    // 如果是左滑就是 播放下一张 moveX 是正值
                    index++;
                }
                var translateX = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translateX + 'px)';

            } else {
                var translateX = -index * w;
                ul.style.transition = 'all,.2s';
                ul.style.transform = 'translateX(' + translateX + 'px)';
            }
        }

        // 手指离开的时候就重新开启定时器

        timer = setInterval(function() {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .5s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000)


    })

    //返回顶部
    var goback = document.querySelector('.goback');
    var content_nav = document.querySelector('.content_nav');
    window.addEventListener('scroll', function() {
        if (window.pageYOffset > content_nav.offsetTop) {
            goback.style.display = 'block';
        } else {
            goback.style.display = 'none';
        }
    })

    //点击返回顶部
    goback.addEventListener('click', function() {
        window.scroll(0, 0);
    })


})